<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// 引入Swiper组件
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Pagination, Navigation } from 'swiper/modules'
// 引入公共组件
import Header from '../components/Header.vue'
import BackToTop from '../components/BackToTop.vue'
import FloatContact from '../components/FloatContact.vue'
// Swiper样式已在index.html中全局引入

const router = useRouter()

// 轮播图数据
const featuredVideos = ref([
  {
    id: 1,
    title: '三毛流浪记：经典动画大片',
    description: '《三毛流浪记》是根据张乐平同名漫画改编的动画作品，讲述了孤儿三毛在旧上海的种种遭遇。本片通过三毛的视角，展现了旧社会的黑暗和人情冷暖，同时也表现了三毛的善良、乐观和坚强。',
    cover: '/static/images/image1.jpg',
    rating: '9.2'
  },
  {
    id: 2,
    title: '三毛奇遇记：奇幻冒险',
    description: '三毛在一次意外中进入了一个奇幻世界，展开了一段惊险刺激的冒险旅程。在这个充满魔法和神秘生物的世界里，三毛学会了勇敢和智慧。',
    cover: '/static/images/image2.jpg',
    rating: '8.9'
  },
  {
    id: 3,
    title: '三毛成长记：青春岁月',
    description: '讲述了三毛从童年到青少年的成长故事，展现了他在困难环境中如何保持乐观心态，努力学习和成长的励志故事。',
    cover: '/static/images/image3.jpg',
    rating: '9.0'
  }
])

// 视频页面内容
const videos = ref([
  { id: 1, title: '三毛流浪记经典片段1', cover: '/static/images/image1.jpg', url: '/static/videos/video1.mp4' },
  { id: 2, title: '三毛流浪记经典片段2', cover: '/static/images/image2.jpg', url: '/static/videos/video2.mp4' },
  { id: 3, title: '三毛流浪记经典片段3', cover: '/static/images/image3.jpg', url: '/static/videos/video3.mp4' },
  { id: 4, title: '三毛流浪记经典片段4', cover: '/static/images/image4.jpg', url: '/static/videos/video4.mp4' },
  { id: 5, title: '三毛流浪记经典片段5', cover: '/static/images/image5.jpg', url: '/static/videos/video5.mp4' },
  { id: 6, title: '三毛流浪记经典片段6', cover: '/static/images/image6.jpg', url: '/static/videos/video6.mp4' },
  { id: 7, title: '三毛奇遇记片段1', cover: '/static/images/image7.jpg', url: '/static/videos/video7.mp4' },
  { id: 8, title: '三毛奇遇记片段2', cover: '/static/images/image8.jpg', url: '/static/videos/video8.mp4' },
  { id: 9, title: '三毛成长记片段1', cover: '/static/images/image9.jpg', url: '/static/videos/video9.mp4' },
  { id: 10, title: '三毛成长记片段2', cover: '/static/images/image10.jpg', url: '/static/videos/video10.mp4' }
])

// 视频播放弹窗相关
const isVideoModalOpen = ref(false)
const currentVideo = ref<{ id: number; title: string; url: string } | null>(null)

// 跳转到视频详情页
const goToVideoDetail = (id: number) => {
  router.push(`/video/${id}`)
}

// 打开视频播放弹窗
const openVideoModal = (video: { id: number; title: string; url: string }) => {
  currentVideo.value = video
  isVideoModalOpen.value = true
  // 禁止背景滚动
  document.body.style.overflow = 'hidden'
}

// 关闭视频播放弹窗
const closeVideoModal = () => {
  isVideoModalOpen.value = false
  currentVideo.value = null
  // 恢复背景滚动
  document.body.style.overflow = ''
}

// 点击遮罩层关闭弹窗
const handleOverlayClick = (event: MouseEvent) => {
  if (event.target === event.currentTarget) {
    closeVideoModal()
  }
}

onMounted(() => {
  console.log('视频页面已加载')
})
</script>

<template>
  <div class="video-container">
    <!-- 背景特效容器 -->
    <div class="background-effects"></div>
    
    <!-- 页面头部 -->
    <Header />
    
    <div class="content-wrapper">
      <!-- 轮播图区域 -->
      <div class="featured-section">
        <Swiper
          :modules="[Autoplay, Pagination, Navigation]"
          :space-between="30"
          :autoplay="{
            delay: 5000,
            disableOnInteraction: false
          }"
          :pagination="false"
          :navigation="false"
          class="featured-swiper"
        >
          <SwiperSlide 
            v-for="video in featuredVideos" 
            :key="video.id"
            @click="goToVideoDetail(video.id)"
          >
            <div class="featured-slide">
              <div class="featured-cover">
                <img :src="video.cover" :alt="video.title" />
                <div class="featured-overlay">
                  <div class="featured-info">
                    <h3 class="featured-title">{{ video.title }}</h3>
                    <p class="featured-description">{{ video.description }}</p>
                    <div class="featured-meta">
                      <span class="rating">评分: {{ video.rating }}</span>
                      <button class="detail-btn" @click.stop="goToVideoDetail(video.id)">查看详情</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
      
      <!-- 视频列表 -->
      <h2 class="section-title">视频列表</h2>
      <div class="video-grid">
        <div 
          v-for="video in videos" 
          :key="video.id" 
          class="video-item"
          @click="openVideoModal(video)"
        >
          <div class="video-card">
            <div class="video-thumbnail">
              <img :src="video.cover" :alt="video.title" class="video-cover-img" />
              <div class="play-icon-overlay">
                <div class="play-icon">▶</div>
              </div>
            </div>
            <div class="video-info">
              <h3 class="video-title">{{ video.title }}</h3>
              <p class="video-description">三毛流浪记经典动画片段</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 视频播放弹窗 -->
    <transition name="video-modal">
      <div 
        v-if="isVideoModalOpen && currentVideo" 
        class="video-modal"
        @click="handleOverlayClick"
      >
        <div class="video-modal-content">
          <div class="video-modal-header">
            <h3 class="video-modal-title">{{ currentVideo.title }}</h3>
            <button class="close-btn" @click="closeVideoModal">×</button>
          </div>
          <div class="video-player-container">
            <video 
              :src="currentVideo.url" 
              controls
              class="video-player"
              autoplay
            >
              您的浏览器不支持视频播放。
            </video>
          </div>
        </div>
      </div>
    </transition>
    
    <!-- 回到顶部组件 -->
    <BackToTop />
    <FloatContact />
  </div>
</template>

<style scoped>
.video-container {
  min-height: calc(100vh - 60px);
  background: #f8f8f8;
  padding: 20px;
  padding-top: 20px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* 夜间模式适配 */
body.dark-mode .video-container {
  background: #181a1b !important;
}

body.dark-mode .section-title {
  color: #eee;
}

body.dark-mode .featured-slide {
  background: #232324;
}

body.dark-mode .video-card {
  background: #232324;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

body.dark-mode .video-title,
body.dark-mode .featured-title {
  color: #fff;
}

body.dark-mode .video-description,
body.dark-mode .featured-description {
  color: #bbb;
}

body.dark-mode .video-modal-content {
  background: #232324;
}

body.dark-mode .video-modal-header {
  background: #181a1b;
  border-bottom: 1px solid #333;
}

body.dark-mode .video-modal-title {
  color: #fff;
}

body.dark-mode .close-btn {
  color: #aaa;
}

body.dark-mode .close-btn:hover {
  background: #333;
}

body.dark-mode .rating,
body.dark-mode .detail-btn {
  background: #535bf2;
  color: #fff;
}

body.dark-mode .featured-overlay {
  background: rgba(0,0,0,0.7);
}

.section-title {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 1.8rem;
  position: relative;
  padding-bottom: 10px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #646cff;
  border-radius: 3px;
}

/* 轮播图区域样式 */
.featured-section {
  margin-bottom: 40px;
  position: relative;
}

.featured-swiper {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.featured-slide {
  cursor: pointer;
  background: white;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.featured-slide:hover {
  transform: translateY(-5px);
}

.featured-cover {
  position: relative;
  width: 100%;
  height: 400px;
}

.featured-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 30px;
  box-sizing: border-box;
}

.featured-info {
  width: 100%;
  max-width: 800px;
  text-align: center;
  color: white;
}

.featured-title {
  margin: 0 0 15px;
  font-size: 1.8rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.featured-description {
  margin: 0 0 20px;
  font-size: 1.1rem;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.featured-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.rating {
  background: #646cff;
  color: white;
  padding: 8px 20px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 1.1rem;
}

.detail-btn {
  background: #646cff;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.detail-btn:hover {
  background: #535bf2;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.video-item {
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.video-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  max-width: 350px;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.video-thumbnail {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.video-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-card:hover .video-cover-img {
  transform: scale(1.05);
}

.play-icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .play-icon-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 3rem;
  color: white;
  opacity: 0.9;
}

.video-info {
  padding: 20px;
}

.video-title {
  margin: 0 0 10px;
  color: #333;
  font-size: 1.2rem;
}

.video-description {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}

/* 视频播放弹窗样式 */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.video-modal-content {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  max-width: 90%;
  max-height: 90%;
  width: 1000px;
  height: 80vh;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
}

.video-modal-title {
  margin: 0;
  color: #333;
  font-size: 1.3rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: #e0e0e0;
}

.video-player-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

.video-player {
  width: 100%;
  height: 100%;
  outline: none;
}

/* 视频弹窗过渡动画 */
.video-modal-enter-active, .video-modal-leave-active {
  transition: opacity 0.3s ease;
}

.video-modal-enter-from, .video-modal-leave-to {
  opacity: 0;
}

.video-modal-enter-from .video-modal-content, .video-modal-leave-to .video-modal-content {
  transform: scale(0.8);
}

.video-modal-enter-to .video-modal-content, .video-modal-leave-from .video-modal-content {
  transform: scale(1);
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .video-modal-content {
    width: 95%;
    height: 70vh;
    max-height: 80%;
  }
  
  .video-player {
    height: 100%;
  }
  
  .featured-cover {
    height: 250px;
  }
  
  .featured-title {
    font-size: 1.4rem;
  }
  
  .featured-description {
    font-size: 1rem;
  }
  
  .featured-meta {
    flex-direction: column;
    gap: 15px;
  }
  
  .featured-overlay {
    padding: 20px;
  }
  
  /* 移动端轮播图导航按钮 */
  :deep(.swiper-button-next),
  :deep(.swiper-button-prev) {
    width: 40px;
    height: 40px;
  }
  
  :deep(.swiper-button-next::after),
  :deep(.swiper-button-prev::after) {
    font-size: 16px;
  }
}
</style>